<template>
	<view class="conter-arr">
		<view class="invite-conter" v-for="(item,index) in arrrCon" @click="conyeConter(item)">
			<view class="invite-left">
				<image class="img" :src="item.headimgurl" mode=""></image>
				<view class="cotert-comner">
					<view class="title">
						{{item.username}}
					</view>
					<view class="sub-tlte">
						{{item.referral_time}}邀请
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<view class="text" @click="setClipboardData(phone)">手机号：{{ phone }}</view>
					<view class="text" @click="setClipboardData(wechat_id)">微信号：{{ wechat_id }}</view>
					<view class="text2" @click="close()">取消</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	// im/user/getReferral 
	import _data from '../../common/_data';
	export default {
		data(){
			return {
				arrrCon:[],
				wechat_id:'',
				phone:'',
			}
		},
		
		onLoad() {
		},
		onShow() {
			this.getReferral()
		},
		computed:{
			staticPhoto () {
			  return _data.static_url();
			},
		},
		methods:{
			setClipboardData(e){
				uni.setClipboardData({
					data: e,
					success: function () {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						  })
					}
				});
			},
			navigateTo(item){
				if(this.user_info.id==item.user_id){
					this.goPages_ok('/pages/personalData/index')
				}else{
					this.goPages_ok('/pages/index/person?uid='+item.user_id)
				}
			},
			conyeConter(item){
				this.$refs.popup.open('bottom');
				this.wechat_id =item.wechat_id;
				this.phone =item.phone;
				
			},
			close(){
				this.$refs.popup.close();
			},
			goPages_ok(path){
				uni.navigateTo({
					url:path
				})
			},
			getReferral(){
				let _this=this;
				this.$httpSend({
				  path: '/im/user/getReferral',
				  data: {},
				  success_action: true,
				  success (res) {
				   _this.arrrCon=res.data
				   wx.setNavigationBarTitle({
				     title: `邀请人（${res.data.length}）`
				   });
				  }
				});
			},
		}
	}

</script>

<style scoped>
	.conter-arr{
		padding: 0 24rpx;
	}
	.popup-content {
			align-items: center;
			justify-content: center;
			padding:0 30rpx;
			height: 250rpx;
			background-color: #fff;
	}
	.text{
		height: 82rpx;
		line-height: 82rpx;	
		text-align: center;
		border-bottom:1rpx solid #eee ;
	}
	.text2{
		height: 92rpx;	
		line-height: 92rpx;	
		text-align: center;
		border-top:8rpx solid #eee;
	}
	.invite-conter{
		padding: 32rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #ECEEF0;
	}
	.invite-left .img{
		width: 80rpx;
		height: 80rpx;
		margin-right: 16rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.invite-left{
		display: flex;
		align-items: center;
	}
	.cotert-comner .sub-tlte{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #9298A0;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.cotert-comner .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #181D24;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	
</style>